<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>MVC is Fun</title>

    <style type="text/css">
      #map-canvas {
        height: 500px;
      }
	  #map-canvas2 {
        height: 500px;
      }
    </style>

    <script type="text/javascript"
        src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:''}]}"></script>
	<script type="text/javascript"
        src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script type="text/javascript">
	  
	  /**
		 * A distance widget that will display a circle that can be resized and will
		 * provide the radius in km.
		 *
		 * @param {google.maps.Map} map The map on which to attach the distance widget.
		 *
		 * @constructor
		 */
		function DistanceWidget(main_map) {
		  this.set('map', main_map);
		  this.set('position', main_map.getCenter());

		  var marker = new google.maps.Marker({
			draggable: true,
			title: 'Move me!'
		  });

		  // Bind the marker map property to the DistanceWidget map property
		  marker.bindTo('map', this);

		  // Bind the marker position property to the DistanceWidget position
		  // property
		  marker.bindTo('position', this);
		}
		DistanceWidget.prototype = new google.maps.MVCObject();
	  var mapIndex  = 1;
      function init() {
        var mapDiv = document.getElementById('map-canvas');
        var map = new google.maps.Map(mapDiv, {
          center: new google.maps.LatLng(37.790234970864, -122.39031314844),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
		var mapTwo = new google.maps.Map(document.getElementById('map-canvas2'), {
          center: new google.maps.LatLng(37.790234970864, -122.39031314844),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
		
		/*
			Demo: switch distanceWidget's map property between two map but not initailize the instance of distance widget
		*/
		$("#switchMapButton").on("click", function()
		{
			if(mapIndex == 1)
			{
				distanceWidget.set('map',mapTwo);
				mapIndex = 2;
			}
			else
			{
				distanceWidget.set('map',map);
				mapIndex = 1;
			}
		});
		var distanceWidget = new DistanceWidget(map);
      }

      google.maps.event.addDomListener(window, 'load', init);
    </script>
  </head>
  <body>
    <form>
	<div id="map-canvas"></div>
	<input type="button" name="switchMap" value="Switch" id="switchMapButton">
	<div id="map-canvas2"></div>
	</form>
  </body>
</html>